<template>
  <div class="wh100">
    <el-form label-position="top" ref="form" :model="form" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="等级名称"
            prop="name"
            :rules="[
              {
                required: true,
                message: '等级名称不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="等级颜色(格式如:red或者#ff0000)"
            prop="color"
            :rules="[
              {
                required: true,
                message: '等级颜色不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="form.color"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="提示文字"
            prop="tips"
            :rules="[
              {
                required: true,
                message: '提示文字不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="form.tips"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            label="提示声音"
            prop="voice"
            :rules="[
              {
                required: true,
                message: '提示声音不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="form.voice"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="状态" prop="enabled" required>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-switch v-model="form.enabled"></el-switch>
                <span class="left10">启用</span>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="24" style="text-align: right">
          <el-form-item>
            <el-button @click="cancelModel()">取消</el-button>
            <el-button
              type="primary"
              :loading="loading"
              @click="onSubmit('form')"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { addWarnLevel, editWarnLevel } from "@/api/warning";
export default {
  props: {
    levelObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    modeType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      form: {
        name: "",
        color: "",
        tips: "",
        voice: "",
        enabled: false,
      },

      loading: false,
    };
  },

  mounted() {
    if (this.modeType != 1) {
      this.form = JSON.parse(JSON.stringify(this.levelObj));
      this.form.enabled = this.levelObj.enabled == 1 ? true : false;
    }
  },

  methods: {
    cancelModel() {
      this.$emit("onClose", { isClose: false });
    },

    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true;

          if (JSON.stringify(this.levelObj) == "{}") {
            let result = await addWarnLevel({
              name: this.form.name,
              enabled: this.form.enabled ? 1 : 0,
              color: this.form.color,
              tips: this.form.tips,
              voice: this.form.voice,
            });
            if (result.code == 200) {
              this.loading = false;
              this.$emit("onClose", {
                isClose: true,
              });
              this.resetForm();
            }
          } else {
            let result = await editWarnLevel({
              id: this.levelObj.id,
              name: this.form.name,
              enabled: this.form.enabled ? 1 : 0,
              color: this.form.color,
              tips: this.form.tips,
              voice: this.form.voice,
            });
            if (result.code == 200) {
              this.loading = false;
              this.$emit("onClose", {
                isClose: true,
              });
            }
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.left10 {
  margin-left: 10px;
}
</style>